<script setup>
import draggable from "vuedraggable";
import { ref, reactive } from "vue";
import { leftModule } from "./itemList";
const list = reactive([
  {
    label: "模块1",
    id: 1,
    isflod: false,
  },
  {
    label: "模块2",
    id: 2,
    isflod: false,
  },
  {
    label: "模块3",
    id: 3,
    isflod: false,
  },
  {
    label: "模块4",
    id: 4,
    isflod: false,
  },
  {
    label: "模块5",
    id: 5,
    isflod: false,
  },
  {
    label: "模块6",
    id: 6,
    isflod: false,
  },
]);

const tags = ref([]);
const onMoveCallback = (val) => {
  console.log("拖动前的索引 :" + val.moved.newIndex);
  console.log("拖动后的索引 :" + val.moved.oldIndex);
};
const getdata = (val) => {
  console.log(val.draggedContext.element.id);
};

const copy = (node, index) => {
  tags.value.splice(index + 1, 0, Object.assign({}, node));
};

// defineProps({
//   msg: String,
// })

const count = ref(0);
</script>

<template>
  <div class="common-layout">
    <el-container style="height: 100vh">
      <el-aside
        width="200px"
        style="
          overflow: auto;
          box-sizing: border-box;
          flex-shrink: 0;
          width: var(--el-aside-width, 300px);
        "
      >
        <el-scrollbar>
          <div>
            <div>常用组件</div>
            <draggable
              :list="leftModule"
              :animation="100"
              item-key="id"
              :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
              class="list-group"
              :forceFallback="true"
              ghost-class="ghost"
              :sort="false"
              :clone="clone"
              @change="onMoveCallback"
              :move="getdata"
            >
              <template #item="{ element }">
                <div class="items">
                  <div class="title">{{ element.compName }}</div>
                </div>
              </template>
            </draggable>
          </div>
        </el-scrollbar>
      </el-aside>
      <el-main
        style="
          -el-main-padding: 20px;
          display: block;
          flex: 1;
          flex-basis: auto;
          overflow: auto;
          box-sizing: border-box;
          padding: var(--el-main-padding);
        "
      >
        <el-empty description="拖进来吧" v-if="tags.length == 0" />
        <el-scrollbar>
          <el-form>
            <draggable
              :list="tags"
              :animation="100"
              item-key="id"
              group="componentsGroup"
              class="list-group"
              :forceFallback="true"
              ghost-class="ghost"
              @change="onMoveCallback"
              :move="getdata"
            >
              <template #item="{ element }">
                <div class="items">
                  <div class="title">{{ element.label }}</div>
                </div>
              </template>
            </draggable>
          </el-form>
        </el-scrollbar>
      </el-main>
    </el-container>
  </div>
  <!-- <h1>{{ msg }}</h1>

  <div class="card">
    <button type="button" @click="count++">count is {{ count }}</button>
    <p>
      Edit
      <code>components/HelloWorld.vue</code> to test HMR
    </p>
  </div>

  <p>
    Check out
    <a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
      >create-vue</a
    >, the official Vue + Vite starter
  </p>
  <p>
    Install
    <a href="https://github.com/vuejs/language-tools" target="_blank">Volar</a>
    in your IDE for a better DX
  </p>
  <p class="read-the-docs">Click on the Vite and Vue logos to learn more</p> -->
</template>

<style scoped>
.read-the-docs {
  color: #888;
}

.items {
  display: inline-block;
  width: 48%;
  margin: 1%;
  transition: transform 0ms !important;
}
.title {
  padding: 5px 10px 8px;
  background: #f4f6fc;
  font-size: 12px;
  margin-left: 5px;
  cursor: move;
  border: 1px solid #409eff;
  border-radius: 3px;
}
</style>
